<template>
  <div>
    <el-container>
      <el-header class="header"> 热门推荐 </el-header>
      <el-container>
        <el-header class="main_head">
          <div>
            每页显示记录数：
            <el-select v-model="value" placeholder="10" style="width: 100px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-input
            v-model="input"
            style="width: 40%"
            placeholder="请输入搜索关键字"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              class="search"
            ></el-button>
          </el-input>
        </el-header>
        <el-main>
          <table>
            <thead>
              <tr>
                <th>
                  <input type="checkbox" />
                  全选
                </th>
                <th>编号</th>
                <th>公司logo</th>
                <th>名称</th>
                <th>职位</th>
                <th>工资</th>
                <th>福利</th>
                <th>工作地点</th>
                <th>工作时间</th>
                <th>实习时长</th>
                <th>性质</th>
                <th>管理</th>
              </tr>
            </thead>
            <tbody v-if="data">
              <tr v-for="(all, i) in data.data" :key="all.jid">
                <td>
                  <input type="checkbox" />
                </td>
                <td>{{ all.jid }}</td>
                <td class="img">
                  <img :src="imgBase + all.jimg" alt="" />
                </td>
                <td>{{ all.jtitle }}</td>
                <td>{{ all.jname }}</td>
                <td>{{ all.jsalary }}</td>
                <td>{{ all.jcondition1 }}</td>
                <td>{{ all.jaddress }}</td>
                <td>{{ all.jrequest1 }}</td>
                <td>{{ all.jrequest2 }}</td>
                <td>{{ all.jsubtitle }}</td>
                <td>
                  <button @click="remove(i)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-main>
        <el-footer class="el_footer">
          <div class="pagesize" v-if="data">
            <!-- <el-pagination background layout="prev, pager, next" :total="50">
            </el-pagination> -->
            <span
              :class="{ disabled: data.pageNo == 1 }"
              @click="getjob(data.pageNo - 1)"
              >上一页</span
            >
            <span
              :class="{ active: n == data.pageNo }"
              @click="getjob(n)"
              v-for="n in data.total"
              :key="n"
              >{{ n }}</span
            >
            <span
              :class="{ disabled: data.pageNo == data.total }"
              @click="getjob(data.pageNo + 1)"
              >下一页</span
            >
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["imgBase"]),
  },
  data() {
    return {
      job: [],
      input: "",
      options: [
        {
          value: "选项1",
          label: "10",
        },
        {
          value: "选项2",
          label: "20",
        },
        {
          value: "选项3",
          label: "30",
        },
        {
          value: "选项4",
          label: "40",
        },
        {
          value: "选项5",
          label: "50",
        },
      ],
      value: "",
      data: null,
      jid: 1,
    };
  },
  mounted() {
    // this.getData();
    this.getjob();
  },
  methods: {
    // 获取分页数据
    getjob(n) {
      this.axios.get(`v1/news/products_q?page=` + n).then((res) => {
        // console.log("分页数据", res);
        this.data = res.data;
      });
    },
    // 点击删除
    remove(i) {
      // console.log(object);
      this.data.data.splice(i, 1);
      this.axios.delete(`/v1/news/delejob?jid=${i + 1}`).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          alert("删除成功");
        } else {
          alert("删除失败");
        }
      });
    },
    // getData() {
    //   this.axios.get("v1/news/job").then((res) => {
    //     console.log(res);
    //     this.data = res.data;
    //   });
    // },
  },
};
</script>
<style scoped src="../assets/css/hot.css">
</style>
<style scoped>
.el-main {
  user-select: none;
}
.active {
  background-color: #e6e6e6;
}
span.disabled {
  pointer-events: none;
  background-color: #ddd;
}
</style>
